import { Button, Card, CardContent, Chip, Container, Grid, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import React from "react";
import Script from 'react-load-script';

const useStyles = makeStyles((theme) => ({
  root: {
    paddingTop: "48px"
  },
  page0: {
    textAlign: "center",
  },
  page0Comp0: {
  },
  page0Comp1: {
    marginTop: '32px'
  },
  page0Comp2: {
    // width: '50%',
    maxWidth: '800px',
    display: 'inline-block',
    textAlign: 'left'
  },
  page1: {
    textAlign: "start",
  },
  page1Comp0: {
    marginBottom: '16px'
  }
}));

function loadSlideCaptcha() {
  // 先注销
  fetch('/logout', {
    method: 'post'
  }).then(() => {
    eval('captchaInit(() => { captchaClose() }, "slide")')
  })
}

function loadImageCaptcha() {
  // 先注销
  fetch('/logout', {
    method: 'post'
  }).then(() => {
    eval('captchaInit(() => { captchaClose() }, "image")')
  })
}

export default function PageContent(props) {
  const classes = useStyles();

  const { index, records } = props;
  if (index === 0) {
    return (
      <div className={classes.root}>
        <Container className={classes.page0}>
          <div className={classes.page0Comp0}>
            <Typography variant="h2" component="h2">
              网站登录验证码生成与核对系统
            </Typography>
            <div style={{ height: '60px' }}></div>
            <Typography variant="body1" color="textSecondary">
              点击顶部标签了解更多
            </Typography>

            <div className={classes.page0Comp1}>
              <Card variant="outlined" className={classes.page0Comp2}>
                <CardContent>
                  <Typography variant="h5" component="h5" gutterBottom>访问记录</Typography>
                  <div>
                    <Typography variant="subtitle1" component="span" gutterBottom>总登录次数：</Typography>
                    <Typography variant="subtitle1" component="span" gutterBottom>{records['totalAccess']}</Typography>
                  </div>
                  <div>
                    <Typography variant="subtitle1" component="span" gutterBottom>总成功次数：</Typography>
                    <Typography variant="subtitle1" component="span" gutterBottom>{records['passedAccess']}</Typography>
                  </div>
                  <div style={{marginTop: '16px'}}>
                    <Typography variant="body1" color="textSecondary">一次“登录操作”指携带验证码参数（默认为_v）进行登录请求；一次成功登录指登录请求验证码正确，登录成功后多次请求登录接口将不记录重复请求次数。请先请求注销接口，再进行下一次爬虫登录。</Typography>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </Container>
      </div>
    );
  } else if (index === 1) {
    return (
      <div className={classes.root}>
        <Container className={classes.page1}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={12} md={4} lg={6} xl={6}>
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h5" component="h1" gutterBottom>文本验证码</Typography>
                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">介绍</Typography>
                    <Typography variant="body2" component="p" gutterBottom>包含数字和字母，并以图片形式展现的验证码。生成过程中加入不规则线条或形状形成噪音，并进行图像扭曲等变换，使得机器不易识别，而人类具有较好的识别率。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">安全性</Typography>
                    <Typography variant="body2" component="p" gutterBottom>安全性一般，取决于验证码复杂程度。复杂的文本验证码不易被OCR（光学字符识别）技术破解；但经过神经网络大量样本的训练，仍然可以达到不错的破解率。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary" gutterBottom>破解方案</Typography>
                    <Chip label="卷积神经网络训练"></Chip>
                  </div>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={6} xl={6}>
              <Grid container spacing={4}>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>示例</Typography>
                      <img src="/exhibit/code/text" alt="文本验证码示例" />
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>前往登录页</Typography>
                      <Button variant="contained" color="primary" href="/login/text">使用“文本验证码”登录</Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h5" gutterBottom>访问记录</Typography>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>登录次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['text']['access']}</Typography>
                      </div>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>成功次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['text']['passed']}</Typography>
                      </div>
                      <div style={{marginTop: '16px'}}>
                        <Typography variant="body1" color="textSecondary">一次“登录操作”指携带验证码参数（默认为_v）进行登录请求；一次成功登录指登录请求验证码正确，登录成功后多次请求登录接口将不记录重复请求次数。请先请求注销接口，再进行下一次爬虫登录。</Typography>
                      </div>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Container>
      </div>
    );
  } else if (index === 2) {
    return (
      <div className={classes.root}>
        <Container className={classes.page1}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={12} md={4} lg={6} xl={6}>
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h5" component="h1" gutterBottom>计算题验证码</Typography>
                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">介绍</Typography>
                    <Typography variant="body2" component="p" gutterBottom>包含数字和运算符，并以图片形式展现的验证码。生成过程中加入不规则线条或形状形成噪音，并进行图像扭曲等变换，使得机器不易识别，而人类具有较好的识别率。同时需要进行正确的算术运算，进一步加大了破解门槛，也带来用户体验的下降。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">安全性</Typography>
                    <Typography variant="body2" component="p" gutterBottom>安全性一般，取决于验证码复杂程度。与文本验证码类似，但多出了对运算符的识别，相比于文本验证码具有更好的安全性。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary" gutterBottom>破解方案</Typography>
                    <Chip label="卷积神经网络训练"></Chip>
                  </div>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={6} xl={6}>
              <Grid container spacing={4}>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>示例</Typography>
                      <img src="/exhibit/code/calc" alt="计算题验证码示例" />
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>前往登录页</Typography>
                      <Button variant="contained" color="primary" href="/login/calc">使用“计算题验证码”登录</Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h5" gutterBottom>访问记录</Typography>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>登录次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['calculation']['access']}</Typography>
                      </div>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>成功次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['calculation']['passed']}</Typography>
                      </div>
                      <div style={{marginTop: '16px'}}>
                        <Typography variant="body1" color="textSecondary">一次“登录操作”指携带验证码参数（默认为_v）进行登录请求；一次成功登录指登录请求验证码正确，登录成功后多次请求登录接口将不记录重复请求次数。请先请求注销接口，再进行下一次爬虫登录。</Typography>
                      </div>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Container>
      </div>
    );
  } else if (index === 3) {
    return (
      <div className={classes.root}>
        <Container className={classes.page1}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={12} md={4} lg={6} xl={6}>
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h5" component="h1" gutterBottom>滑动验证码</Typography>
                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">介绍</Typography>
                    <Typography variant="body2" component="p" gutterBottom>属于行为式验证码的一种。根据给出的图像完成拼图，用户只需进行简单的拖动操作即可，十分方便。安全性较高的滑动验证码还会捕获用户拖动时的鼠标轨迹，来判断是否为机器人行为。相比于输入操作，带来的使用体验大幅提升。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">安全性</Typography>
                    <Typography variant="body2" component="p" gutterBottom>安全性较高，需要爬虫进行浏览器操作，并取决于是否鉴定鼠标轨迹。但也容易遭到拟人拖动的攻击。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary" gutterBottom>破解方案</Typography>
                    <Chip label="Selenium"></Chip><Chip label="目标检测"></Chip>
                  </div>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={6} xl={6}>
              <Grid container spacing={4}>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>示例</Typography>
                      <Button variant="contained" color="primary" onClick={(e) => loadSlideCaptcha()}>弹出滑动验证码</Button>
                      <Script url="/captcha.js" />
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>前往登录页</Typography>
                      <Button variant="contained" color="primary" href="/login/slide">使用“滑动验证码”登录</Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h5" gutterBottom>访问记录</Typography>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>登录次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['slide']['access']}</Typography>
                      </div>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>成功次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['slide']['passed']}</Typography>
                      </div>
                      <div style={{marginTop: '16px'}}>
                        <Typography variant="body1" color="textSecondary">一次“登录操作”指携带验证码参数（默认为_v）进行登录请求；一次成功登录指登录请求验证码正确，登录成功后多次请求登录接口将不记录重复请求次数。请先请求注销接口，再进行下一次爬虫登录。</Typography>
                      </div>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Container>
      </div>
    );
  } else if (index === 4) {
    return (
      <div className={classes.root}>
        <Container className={classes.page1}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={12} md={4} lg={6} xl={6}>
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h5" component="h1" gutterBottom>图片验证码</Typography>
                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">介绍</Typography>
                    <Typography variant="body2" component="p" gutterBottom>给出一组待选图片和需求，并要求用户选择符合分类的所有图片。知名的“reCAPTCHA”就使用过这种方式。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">安全性</Typography>
                    <Typography variant="body2" component="p" gutterBottom>安全性高，需要爬虫进行图片识别和分类，需要耗费大量时间进行数据集的训练，提高识别门槛。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary" gutterBottom>破解方案</Typography>
                    <Chip label="目标检测"></Chip>
                  </div>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={6} xl={6}>
              <Grid container spacing={4}>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>示例</Typography>
                      <Button variant="contained" color="primary" onClick={(e) => loadImageCaptcha()}>弹出图片验证码</Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>前往登录页</Typography>
                      <Button variant="contained" color="primary" href="/login/image">使用“图片验证码”登录</Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h5" gutterBottom>访问记录</Typography>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>登录次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['image']['access']}</Typography>
                      </div>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>成功次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['image']['passed']}</Typography>
                      </div>
                      <div style={{marginTop: '16px'}}>
                        <Typography variant="body1" color="textSecondary">一次“登录操作”指携带验证码参数（默认为_v）进行登录请求；一次成功登录指登录请求验证码正确，登录成功后多次请求登录接口将不记录重复请求次数。请先请求注销接口，再进行下一次爬虫登录。</Typography>
                      </div>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Container>
      </div>
    );
  } else {
    return (
      <div className={classes.root}>
        <Container className={classes.page1}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={12} md={4} lg={6} xl={6}>
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h5" component="h1" gutterBottom>短信验证码</Typography>
                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">介绍</Typography>
                    <Typography variant="body2" component="p" gutterBottom>通过服务端生成一串代码，再借助云平台发送短信至用户手机，阻断中间人的监听行为来保证安全性。目前广泛使用于各个网站中，同时也能方便用户，无需记忆账号与密码即可使用服务。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary">安全性</Typography>
                    <Typography variant="body2" component="p" gutterBottom>安全性高，需要用户接收短信。鉴于爬虫对于用户手机信息的获取极为困难，因此可以视为最安全的验证码类型。</Typography>
                  </div>

                  <div className={classes.page1Comp0}>
                    <Typography variant="subtitle2" color="textSecondary" gutterBottom>破解方案</Typography>
                    <Typography variant="body2" component="p">较难破解</Typography>
                  </div>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={6} xl={6}>
              <Grid container spacing={4}>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>服务提供商</Typography>
                      <Typography variant="body2" component="p">腾讯云</Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h1" gutterBottom>前往登录页</Typography>
                      <Button variant="contained" color="primary" href="/login/sms">使用“短信验证码”登录</Button>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12}>
                  <Card variant="outlined">
                    <CardContent>
                      <Typography variant="h5" component="h5" gutterBottom>访问记录</Typography>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>登录次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['sms']['access']}</Typography>
                      </div>
                      <div>
                        <Typography variant="subtitle1" component="span" gutterBottom>成功次数：</Typography>
                        <Typography variant="subtitle1" component="span" gutterBottom>{records['sms']['passed']}</Typography>
                      </div>
                      <div style={{marginTop: '16px'}}>
                        <Typography variant="body1" color="textSecondary">一次“登录操作”指携带验证码参数（默认为_v）进行登录请求；一次成功登录指登录请求验证码正确，登录成功后多次请求登录接口将不记录重复请求次数。请先请求注销接口，再进行下一次爬虫登录。</Typography>
                      </div>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Container>
      </div>
    );
  }
}
